<template>
	<view class="feedback-box center column">
		意见反馈
		<radio-group class="radio-group" @change="radioChange">
			<label class="label">
				<radio value="1" checked color="#007AFF"  style="transform:  scale(0.7);"/><text>内容意见</text>
			</label>
			<label class="label">
				<radio value="2"   color="#007AFF"  style="transform:  scale(0.7);"/><text>产品建议</text>
			</label>
			
			<label class="label">
				<radio value="3"   color="#007AFF"  style="transform:  scale(0.7);"/><text>其他</text>
			</label>
		</radio-group>
		
		<textarea v-model="formData.content"   maxlength="500" placeholder="请填写具体内容帮助我们了解您的意见和建议" />
		<input v-model="formData.qq" type="text" maxlength="15"  placeholder="请填写QQ" />
		<input v-model="formData.weixin" type="text" maxlength="15"  placeholder="请填写你的微信" />
		
		<!-- #ifdef APP-PLUS -->
			<view class="location">
				<view>您的当前位置：</view>
				<text>{{location  || '获取信息中'}}</text>
			</view>
		<!-- #endif -->
		
		
		<button :loading="loading" :disabled="loading" type="primary" @click="submitHnadler">提 交</button>
	</view>
</template>

<script>
	import api from  '@/api/system.js'
	export default {
		data() {
			return {
				formData:{
					type:'1' , //radio-group 得默认值 类型
					content:'',
					qq:'',
					weixin:''
				},//表单数据
				location:'',//当前位置
				loading:false , //加载状态
			}
		},
		created() {
		
		},
		onLoad() {
			// #ifdef APP-PLUS
				//针对 APP 端  获取用户位置
				uni.getLocation({
					type: 'gcj02',  //安卓要指定type 要gcj02 类型
					geocode: true,  //解析中文地址信息
					success:(res)=>{
						// res.address  仅App端支持 
						//province 省份
						//city 	 城市名称 
						//district  县城
						console.log( ' ressss'  , res)
						this.location  = res.address.province + res.address.city
					}
				})
			// #endif	
			
			// #ifdef H5
				uni.getLocation({
				    type: 'wgs84',
				    geocode:true,//设置该参数为true可直接获取经纬度及城市信息
				    success:  (res) =>{
				        console.log('获取定位信息',res);
				        this.latitude = res.latitude;
				        this.longitude =  res.longitude;
				        // that.area = res.address.city;
				    }
				});
			// #endif
			
		},
		methods: {
			//changge 监听事件
			radioChange(e){
				this.formData.type  = Number.parseInt(e.detail.value)
			},
			
			
			//提交反馈意见
		async	submitHnadler(){
				if(!this.formData.content  || this.formData.content.trim().length < 10 ){
					this.$util.msg('反馈内容至少输入10个字')
					return 
				}
				
				if( !this.formData.qq  && !this.formData.weixin){
					this.$util.msg('QQ和微信至少填写一个')
					return 
				} 
				
				if(this.formData.qq && !this.$util.checkStr(this.formData.qq , 'QQ')){
					this.$util.msg('QQ填写错误')
					return
				}
				
				//在util.js 中添加关于微信得校验/^[a-zA-Z][a-zA-Z\d_-]{5,19}$/.test(str); 
				if(this.formData.weixin && !this.$util.checkStr(this.formData.weixin , 'weixin')){
					this.$util.msg('微信填写错误')
					return
				}
				
				this.loading= true 
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				
				
				console.log(typeof this.formData.type , ' formData')
				const  res  = await  api.addFeedback(this.formData)
				this.loading = false 
				uni.hideLoading()
				if(!res.code === 20000){
					this.$util.msg(res.message)
					return
				}
				
				uni.showModal({
					content:'您的意见反馈成功',
					showCancel:false ,  //取消按钮隐藏
					success: (res) => {
						this.navBack()  //全局封装返回上一页/
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $xg-color-grey;
	}
	.feedback-box{
		padding: 0  30rpx;
	}
	.radio-group{
		margin:30rpx 0 ;
		.label{
			margin-right: 30rpx;
			font-size:30rpx;
			color: black;
		}
	}
	
	textarea {
		border:1px solid #e9e9e9;
		width:100%;
		padding: 10rpx;
		line-height: 60rpx;
	}
	input{
		width:100%;
		border:  1px solid #e9e9e9;
		margin-top: 30rpx;
		padding:10rpx;
		height:70rpx;
		
	}
	.location{
		margin:50rpx  0 ; 
		align-self: flex-start;  /*将 您的当前位置:获取信息中 字样 	align-self: flex-start 移至最左边*/
		font-size:30rpx;
		color:$xg-text-color-grey;
		line-height: 50rpx;
		text{
			color: $xg-text-color-grey;
		}
	}
	
	button[type=primary]{
		width:100%;
		margin-top: 50rpx;
		background-color: $xg-text-color-blue !important;
	}
	
	.button-hover[type=primary]{
		width:100%;
		margin-top: 50rpx;
		background-color: $xg-color-primary !important;
	}
</style>
